<template>
     <div class="page-content">
        <button @click="goBack" v-show="isshow">返回上一页</button>
        <div class="comm-content" ref="box"></div>
    </div>
</template>
<script>
import getMapName from '../../public/getMapName'
export default {
    data() {
        return {
            myEcharts:null,
            isshow:false
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },
    methods: {
        // 返回
        goBack(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.isshow = false
        },
         // 适配屏幕
         screen(){
            this.myEcharts.resize()
            // 计算一个文字大小的比例
            let width = this.$refs.box.offsetWidth
            let num = width / 100 * 3
            let options = {
                title:{
                    textStyle:{  // 设置主标题样式
                        fontSize:num
                    },
                    subtextStyle:{
                        fontSize: num,
                    }
                }
            }
            // 修改图标样式以后要重绘
            this.myEcharts.setOption(options)
        },
        async initEcharts(){
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            // 绘制地图的数据 
            let mapData = await this.$http('http://localhost:8080/map/china.json')
            // console.log(mapData);
            this.$echarts.registerMap('china',mapData.data)
            /** @type EChartsOption */
            let options = {
                title: {
                    text: '各地区农作物覆盖面积',
                },
                tooltip: {
                    show: true,
                },
                visualMap:{
                    show:true,
                    calculable:true, //是否显示拖动手柄
                    max:400,
                    min:100,
                    color:['#0F3357','#36BFE5']
                },
                series: [
                    {
                        type:'map',
                        map:'china',
                        zoom: 1.2, // 图片显示的大小
                        label: {
                            show: true,
                        },
                        left: '15%',
                        right: '15%',
                        top: '15%',
                        bottom: '10%',
                    }
                ],
            }
            this.myEcharts.setOption(options)
            // 给地图绑定一个点击事件
            this.myEcharts.on('click',async (city)=>{
                let cityName = getMapName(city.name) // 获取到的中文省份名称转换成拼音
                console.log(cityName);
                if(!cityName.name){return}
                let cityList = await this.$http('http://localhost:8080' + cityName.path)
                this.$echarts.registerMap(cityName.name,cityList.data)
                let options = {
                    series:[
                        {
                            type:'map',
                            map:cityName.name
                        }
                    ]
                }
                this.myEcharts.setOption(options)
                this.isshow = true
            })
        },
        async getData(){
            let datalist = await this.$http('/api/CropCoverage')
            console.log(datalist);
            this.setEcharts(datalist)
        },
        setEcharts(datalist){
            let options = {
                title:{
                    subtext: datalist.data.MainPlants + '万亩',
                    subtextStyle: {
                        color: 'yellow',
                        
                    },
        
                },
                series:[
                    {
                        data:datalist.data.content
                    }
                ]
            }
            this.myEcharts.setOption(options)
        }
    },
    mounted() { 
        this.initEcharts()
        this.getData()
        window.addEventListener('resize',this.screen)
        this.screen()
    },
}
</script>
<style>
button{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99999;
}
</style>